<template>
  <div class="btn_warp" style="height:32px;width: 100%;padding-top: 5px;padding-bottom: 10px">
    <el-input v-model="search1" clearable placeholder="按日期进行查询" style="width: 250px;margin-right: 30px;margin-left: 30px"/>
    <el-input v-model="search2" clearable placeholder="按应付金额查询" style="width: 250px;margin-right: 30px"/>
    <el-button type="success" style="float: right;margin-right: 50px" @click.prevent="handleSearch">查询</el-button>
    <el-button type="success" style="float: right;margin-right: 10px" @click.prevent="handleClean">全部清空</el-button>
  </div>
  <el-table :data="filterTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe style="width: 990px;margin: 0 auto" max-height="472" height="472" :cell-style="{ textAlign: 'center' }">
    <el-table-column prop="" label="序号" width="70" :show-overflow-tooltip="true">
      <template #default="scope">
        {{scope.$index+1}}
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeDate" label="日期" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfeeDate }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="propertyAddress" label="房产地址" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.propertyAddress }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeTotalfee" label="应付金额(元)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfeeTotalfee }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeLreading" label="上次读数(吨)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfeeLreading }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeTreading" label="本次读数(吨)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfeeTreading }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeAmount" label="总用量(吨)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfeeAmount }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeePrice" label="单价(元)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfeePrice }}</span>
      </template>
    </el-table-column>
  </el-table>
  <div class="page_warp">
    <el-pagination  background @current-change="handleCurrentChange" v-model:page-size="pageSize" v-model:current-page="currentPage" layout="prev, pager, next , jumper" :total="filterTableData.length"></el-pagination>
  </div>
</template>

<script>
  import {ref, onMounted} from 'vue'
  import axios from "axios"
  export default {
    name: "HouseHold",
    setup(){
      const tableSels=ref([])
      const tableData = ref([])
      const pageSize=ref(10)
      const currentPage=ref(1)
      const search1=ref('')
      const search2=ref('')
      //条件过滤
      let filterTableData =ref([])

      //按条件进行查询
      function handleSearch(){
        filterTableData.value=tableData.value.filter(
            (data) => data.waterfeeDate.toLowerCase().includes(search1.value.toLowerCase()) //匹配日期
                && data.waterfeeTotalfee.toLowerCase().includes(search2.value.toLowerCase()) //匹配应付金额
        )
      }
      //清空查询条件
      function handleClean(){
        search1.value=''
        search2.value=''
      }
      //分页事件
      function handleCurrentChange(value){
        currentPage.value = value;
      }
      //挂载加载数据
      onMounted(()=>{
        axios.get('http://localhost:8085/getWaterfeeByAddress',{
          params:{
            address:JSON.parse(sessionStorage.getItem("user")).username
          }
        }).then(
            (response)=>{
              tableData.value=response.data
              filterTableData.value=response.data
            },
            ()=>{
            }
        )
      })

      return{
        tableSels,
        tableData,
        filterTableData,
        search1,
        search2,
        pageSize,
        currentPage,
        handleCurrentChange,
        handleSearch,
        handleClean
      }
    }
  }
</script>

<style scoped>
.el-table{
  /*padding: 20px 20px 20px 20px;*/
}
.page_warp{
  width: 600px;
  margin: 5px auto;
  height: 40px;
}
.el-pagination{
  margin-right: 50px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
</style>